<template>
    <div class="create">
        <div class="edit">
            问卷题目:
            <el-input v-model="WholeSurvey.survey.surTitle" class="input"></el-input><br/>
            <el-button @click="log()" v-show="false">打印</el-button>
            <el-button @click="add()">添加</el-button>
            <el-button @click="save()">保存</el-button>
            <el-button @click="delTitle()">删除最后一题</el-button><br/>
            <!--类型选择框  -->
            <el-select v-model="choiceType" placeholder="请先选好类型再添加">
            <el-option
                v-for="item in typeForm"
                :key="item.type"
                :label="item.label"
                :value="item.type">
            </el-option>
            </el-select>
        </div>
        <br/><br/><br/>
        
        <!-- 遍历循环各个题目 -->
        <div class="items">
            <div v-for="(item,index) in WholeSurvey.wholeTitles" :key="index" >
                <!-- 循环时，新添加的数据中只有题目的titnum以及type -->
                <singlechoice   v-if="item.title.type==1" :temp="item"><p> {{item}}:::{{index}}</p></singlechoice>
                <multichoice v-if="item.title.type==2" :temp="item"></multichoice>
                <inputbox v-if="item.title.type==3" :temp="item"></inputbox>
                <br/><br/><br/>
            </div>  
        </div>
    </div>
</template>

<script>
//关于对类型的控制，使用if--else进行选择判断
import singlechoice from './options/singleChoice';
import multichoice from './options/multiChoice'
import inputbox from './options/inputBox'

export default {
    data () {
        return {
            temp:'1',

            subindex: 6,               //子组件的下标（从1开始算）
            count: 1,               //题目数量
            choiceType: 1,         //添加题目的类型

            typeForm:[{             //类型选择框
                type: 1,
                label: '单选'
            },{
                type: 2,
                label: '多选'
            },{
                type: 3,
                label: '单填'
            },],
            //问卷信息
            WholeSurvey:{
                // userName:'',
                // survey: {
                //     surId: '',
                //     userId: '3',
                //     state:'1',  //1:未发布2：已发布
                //     surTitle:'问卷题目',
                //     surDate:'6',
                //     surNum:'',    //感觉不需要，先放着
                // },
                //  wholeTitles:[{                  
                //     title:{
                //         type:'1',
                //         must: 1,
                //         content:'',
                //         titNum:'1',
                //     },
                //     choices: [                       //选项的信息  
                //         {
                //         choiceNum: 1,               //choiceNum表示选项号 
                //         content: ''                  //表示内容
                //         }]    
                //  }],
                 
            }
           
        }
    },
    methods: {
        //增加题目
      add(){
          console.log(this.count)
          this.WholeSurvey.wholeTitles.push({   
              title:{
                  type:this.choiceType,
                  //定位错误，这个count应该计算最大的那个开始算起
                  titNum:this.count,
                  must:1
              },
              choice:[]
          });
          this.count++;
      },
        //删除题目
      delTitle(){
          this.WholeSurvey.wholeTitles.pop();
          this.count--;  
      },  
        //打印题目
      log(){

        console.log(this.WholeSurvey);

      },
      save(){
          //先保存数据到index中
          for(var index in this.WholeSurvey.wholeTitles){


            // 通过children直接获取子组件的信息，并且传给父组件
            this.WholeSurvey.wholeTitles[index].choices=this.$children[this.subindex].wholeTitles.choices;     //直接通过子组件的方法获取相关信息
            this.WholeSurvey.wholeTitles[index].title.must=this.$children[this.subindex].wholeTitles.title.must;
            this.WholeSurvey.wholeTitles[index].title.content=this.$children[this.subindex].wholeTitles.title.content;
            
            this.WholeSurvey.userName=sessionStorage.userName;
            this.WholeSurvey.survey.surDate=new Date().toLocaleString();
            this.subindex++;
          }

          this.subindex=6;

        //发送表数据
        this.$axios.post('http://localhost:8082/home/save',this.WholeSurvey)
        .then(res=>{
            // console.log(this.WholeSurvey.survey);
            console.log(res.data);
        })
        this.$router.push('okcreate');

      },

    },


    components: {
        singlechoice,
        multichoice,
        inputbox
    },


    //创建时获取问卷信息
    mounted () {
        this.temp=sessionStorage.surId;
        this.$axios.post('http://localhost:8082/home/edit',this.temp,{
        headers: {
            'Content-Type': 'application/json; charset=UTF-8'
            }
        })
        .then(res=>{
            //获取wholesurvey   
            this.WholeSurvey=res.data.data.WholeSurvey;
            console.log(res.data);
            console.log(this.WholeSurvey);

            this.count=this.WholeSurvey.wholeTitles.length+1;
            console.log(this.count)
        //             console.log("test");
        // console.log(this.WholeSurvey);
        // console.log(this.WholeSurvey.wholeTitles.length);
        });

        //改变count的值

        
        
    }

}
</script>
<style>
.create{
    float:bottom;
}

.items{

    top: 220px;
   float: inherit;   
}
.input{
    width: 330px;
}
</style>